import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'; //导入css文件
import App from './App';
import * as serviceWorker from './serviceWorker';

// // （1）
// let app = <App />; // 组件
// let rootDom = document.getElementById('root');
//  // 这个也是一个js对象，元素的对象

// //  let h1 = <h1> hello word helinyu </h1><span>这个是副标题</span>
//  let h2 = <div><h1> hello word helinyu </h1><span>这个是副标题</span></div>
// //jsx允许的写法，就是一个对象，会生成一个普通的js对象, 这个就是和上面的<App />一样的东西向
// // 要渲染什么， 就要在第一个参数传入， h1就是一个元素，最小的达纳韦


// （2）
// // ReactDOM.render( h2, rootDom);
// // serviceWorker.unregister();
// // 实现时刻的显示
// //  变量react直接是{name}, 插入变量

// function clock() {
//     let time = new Date().toLocaleTimeString();
//     // let element = <h1>现在的时间是: {time} </h1> 
//     let element = (
//         <div>
//             <h1>现在的时间是: {time} </h1> 
//         </div>
//     )
//     //  可以多行，但是很难看， 可以用括号括起来
//     // let root = document.getElementById('root');
//     let root = document.querySelector('#root'); // 等同上面

//     ReactDOM.render(element, root);
// }
// clock()

// // 需要实时变化怎么处理？
// // 需要间隔函数，其实就是时钟 // 1000毫秒调用一次
// // 用js解决一切，组件化开发
// setInterval(clock, 1000);

// （3） 返回一个元素
//  react 函数式组件, 
function Clock(props) {
    //  正常的一个对象使用
    return  ( <div>
                    <h1>现在的时间是: {props.date.toLocaleTimeString()} </h1>
                    <h2>这个是副标题</h2>
                </div>  )
}

function run() {
    ReactDOM.render(
        <Clock date={new Date()}/>,
        document.querySelector('#root')
    );
}
setInterval(run(), 1000);
